import logo from "@img/bookshelf-logo.svg"
import {
    Button,
    IconButton,
    Paper,
    Stack,
    ThemeProvider,
    Typography,
} from "@mui/material"
import { useNavigate } from "react-router-dom"
import { footerTheme } from "@entities/footer"
import { primaryFooterButtons } from "@entities/footer/const/primary-footer-buttons"
import { secondaryFooterButtons } from "@entities/footer/const/secondary-footer-buttons"

export const Footer = () => {
    const navigate = useNavigate()

    return (
        <ThemeProvider theme={footerTheme}>
            <Paper>
                <Stack
                    justifyContent={"center"}
                    alignItems={"center"}
                    spacing={2}
                >
                    <img
                        width={90}
                        height={90}
                        src={logo}
                        alt={"bookshelf-logo"}
                    />
                    <Stack direction={"row"}>
                        {primaryFooterButtons.map((button) => (
                            <Button onClick={() => navigate(button.path)}>
                                {button.children}
                            </Button>
                        ))}
                    </Stack>
                    <Stack direction={"row"}>
                        {secondaryFooterButtons.map((button) => (
                            <IconButton onClick={() => navigate(button.path)}>
                                {button.icon}
                            </IconButton>
                        ))}
                    </Stack>
                    <Typography>
                        Copyright &copy; 2024, Bookshelf. Все права защищены.
                    </Typography>
                </Stack>
            </Paper>
        </ThemeProvider>
    )
}
